<ion-header>
    <ion-navbar>
        <button (click)="login()" ion-button class="loginButton">登录</button>
    </ion-navbar>


</ion-header>
<link rel="stylesheet" type="text/css" href="../../assets/fontClass/iconfont.css">
<ion-content padding>
    <!--轮播图（两到三张）-->
    <ion-slides pager style="width: 100%;height: 125px">
        <ion-slide>
            <img src="../../assets/imgs/homeDir/home.png" class="imgHome">
        </ion-slide>
        <ion-slide>
            <img src="../../assets/imgs/homeDir/home1.png" class="imgHome">
        </ion-slide>
        <ion-slide>
            <img src="../../assets/imgs/homeDir/home2.png" class="imgHome">
        </ion-slide>
    </ion-slides>
    <br>

    <!--栏目（一行四个）-->
    <div class="column">
        <ion-grid style="padding: 0px">
            <ion-row>
                <ion-col col-3>
                    <div class="round">
                        <i class="iconfont icon-baoji" (click)="allservice()"></i>
                    </div>
                    <p><span *ngIf="home">{{home.ProfessionalCleaning}} </span></p>
                </ion-col>
                <ion-col col-3>
                    <div class="round">
                        <i class="iconfont icon-saoba" (click)="allservice()"></i>
                    </div>
                    <p><span *ngIf="home">{{home.BasicCleaning}}</span></p>
                </ion-col>
                <ion-col col-3>
                    <div class="round">
                        <i class="iconfont icon-weixiuchang" (click)="allservice()"></i>
                    </div>
                    <p><span *ngIf="home">{{home.FamilyRepair}}</span></p>
                </ion-col>
                <ion-col col-3>
                    <div class="round ">
                        <i class="iconfont icon-kongtiao" (click)="allservice()"></i>
                    </div>
                    <p><span *ngIf="home">{{home.ApplianceCleaning}} </span></p>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col col-3>
                    <div class="round">
                        <i class="iconfont icon-T-shirt" (click)="allservice()"></i>
                    </div>
                    <p><span *ngIf="home">{{home.LaundryService}} </span></p>
                </ion-col>
                <ion-col col-3>
                    <div class="round">
                        <i class="iconfont icon-baomu" (click)="allservice()"></i>
                    </div>
                    <p><span *ngIf="home">{{home.HerNanny}} </span></p>
                </ion-col>
                <ion-col col-3>
                    <div class="round">
                        <i class="iconfont icon-all" (click)="allservice()"></i>
                    </div>
                    <p><span *ngIf="home">{{home.AllService}} </span></p>
                </ion-col>

            </ion-row>
        </ion-grid>
    </div>

    <div style="height: 10px;width: 293px;background: #F1F1F1">
    </div>

    <!--服务推荐-->
    <div class="service">
        <ion-grid style="padding-bottom: 0px">
            <ion-row>
                <ion-col col-2>
                    <div (click)="clean()" *ngIf="home">{{home.PeriodicCleaning}}</div>
                    <button ion-button color="light" outline>HOT</button>
                </ion-col>
                <ion-col col-3>
                    <img src="../../assets/imgs/homeDir/clean.jpg" style="display: inline-block;">
                </ion-col>
                <div style="width: 1px;height: 75px;background:#F1F1F1;display: inline-block;"></div>
                <ion-col col-3 style="padding: 0px">
                    <div style="padding: 2px" (click)="newforest()" *ngIf="home">{{home.NewForest}}</div>
                    <button ion-button color="light" outline>平价优惠</button>
                </ion-col>
                <ion-col col-3>
                    <img src="../../assets/imgs/homeDir/house.png" height="30" width="500"
                         style="display: inline-block; text-align: center">
                </ion-col>
            </ion-row>
            <div style="width: 100%;height: 1px;background:#F1F1F1;display: inline-block;"></div>
            <ion-row>
                <ion-col col-5>
                    <div (click)="nanny()" *ngIf="home">{{home.Nanny}}</div>
                    <button ion-button color="light" outline><span>全新上线</span></button>
                    <img src="../../assets/imgs/homeDir/mother.png" width="500" height="190" style="padding: 8px">
                </ion-col>
                <div style="width: 1px;height: 235px;background:#F1F1F1;display: inline-block;"></div>
                <ion-col col-6>
                    <div style="text-align: left;" *ngIf="home">{{home.AirCleaning}}</div>
                    <button ion-button color="light" outline><span>精品推荐</span></button>
                    <img src="../../assets/imgs/homeDir/air.png" width="70"
                         style="padding-top: 10px;display: inline-block;">
                    <div style="width: 100%;height: 1px;background:#F1F1F1;display: inline-block;"></div>
                    <div (click)="lampblack()" *ngIf="home">{{home.LampblackCleaning}}</div>
                    <img src="../../assets/imgs/homeDir/machine.png" style=" text-align: center;padding-top: 10px;">
                </ion-col>
                <div style="width: 100%;height: 1px;background:#F1F1F1;display: inline-block;"></div>
            </ion-row>
        </ion-grid>
        <ion-grid>
        </ion-grid>
    </div>

    <!--<h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero.name}}</h2>
    <p>Heroes:</p>
    <ul>
        <li *ngFor="let hero of heroes">
            {{ hero.name }}
        </li>
    </ul>-->


</ion-content>
